<template>
  <m-modal
    v-model="visible"
    title="关系类型"
    okText="确定"
    :mask="true"
    @ok="handleOk"
    @cancel="handleCancel">
    <attr-tip type="relationType"></attr-tip>
    <div class="attr-table">
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :pagination='false'
        :scroll="{ y: 505 }">
        <template slot="name" slot-scope="text, record">
          <img :src="`statics/images/sysml/${record.icon}.svg`" alt="icon"/><span>{{ text }}</span>
        </template>
        <template slot="isVisible" slot-scope="text, record">
          <a-checkbox :checked="text" @change="(e)=>changeVisible(e,record)"></a-checkbox>
        </template>
        <template v-if="trace" slot="style" slot-scope="text, record">
          <div :style="{height:'20px',paddingTop:'8px',cursor:'pointer'}" @click.stop="(e)=>toggleColorModal(e,record)">
            <div :style="{borderBottomStyle:text.border,borderBottomWidth:'3px',borderBottomColor:text.color}" class="line" ></div>

          </div>
        </template>
      </a-table>
    </div>
  </m-modal>
</template>
<script>
import { Portal } from 'src/components/common/Portal.vue';
import Modal from 'src/components/common/CustomModal';
import AttrTip from 'src/components/Attribute/comps/AttrTip';
import { colorPickerModal } from './ColorPicker';

const treeDataDefault = [
  {
    title: '<<抽象的需求类型>>',
    key: '0-0',
    value: '0',
    disabled: true,
    disableCheckbox: true,
    icon: "statics/images/sysml/Requirement.svg",
    scopedSlots: {
      title: "default"

    },
    children: [
      {
        title: '需求',
        key: '0-0-0',
        value: '1',
        icon: "statics/images/sysml/Requirement.svg",
        scopedSlots: {
          title: "default"

        },
      },
      {
        title: '拓展需求',
        key: '0-0-1',
        value: '2',
        icon: "statics/images/sysml/Requirement.svg",
        scopedSlots: {
          title: "default"

        },
        //// children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],
      },
      {
        title: '商务需求',
        key: '0-0-2',
        value: '3',
        icon: "statics/images/sysml/Requirement.svg",
        scopedSlots: {
          title: "default"

        },
        //// children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],
      }
    ],
  }
];

//// const data = [
////   {
////     key: '1',
////     name: '追踪',
////     isVisible: true,
////     icon: 'Trace',
////     style: { color: '#5AD8A6' },
////   },
////   {
////     key: '2',
////     name: '精华',
////     icon: 'Refine',
////     isVisible: true,
////     style: { color: '#F6BD16' },
////   },
////   {
////     key: '3',
////     name: '复制',
////     icon: 'Copy',
////     isVisible: false,
////     style: { color: '#E8684A' },
////   },
////   {
////     key: '4',
////     name: '派生',
////     isVisible: false,
////     icon: 'DeriveReqt',
////     style: { color: '#5D7092' },
////   },
////   {
////     key: '5',
////     name: '包含',
////     isVisible: false,
////     icon: 'Containment',
////     style: { color: '#BDC6D0' },
////   }
//// ];
const comp = {
  name: 'comp-relation-type-modal',
  components: {
    'm-modal': Modal,
    'attr-tip': AttrTip
  },
  props: {
    legend: Array,
    trace: { type: Boolean, default: true }
    
  },
  mounted() {
    
    this.visible = true;
    this.data =  this.legend;
    //// console.log('text', this.text);

  },
  data() {
    return {
      visible: false,
      text: "",
      //// columns:,
      data: []
    };
  },
  computed: {
    columns(){
      let col =  [
        {
          title: '关系规格',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '是否显示',
          className: 'isVisible',
          dataIndex: 'isVisible',
          scopedSlots: { customRender: 'isVisible' },
        }        
      ];
      if (this.trace){
        col.push({
          title: '样式',
          dataIndex: 'style',
          scopedSlots: { customRender: 'style' },
        });      
      }
      return  col;
    }
  },
  methods: {
    handleOk(){
      this.$emit('sure', this.data);
      
    },
    handleCancel(){
      this.visible = false;
      this.$emit('close');
    },
    changeVisible(e, record){
      record.isVisible = e.target.checked;
    },
    toggleColorModal(e, record){
      colorPickerModal.popup({ line: record }).then((res) => {
        const { color, border } = res;
        record.style.color = color;
        record.style.border = border;
      });
    }
  }
};
export default comp;
export const relationTypeModal = new Portal(comp);
</script>
<style lang="scss" scoped>
.attr-table{
  height: 600px;
  .line{
    height: 3px;
    width: 120px;
  }
}
</style>